<template>
  <div class="product-add">
    <!--form表单-->
    <el-form size="small" ref="form" :model="form" label-width="200px">
      <!--店员修改-->
      <div class="common-form">配置编辑</div>
      <el-form-item label="配置名称" prop="name" :rules="[{required: true,message: '配置名称不能为空'}]">
        <el-input class="max-w460" v-model="form.name" placeholder="请输入姓名"></el-input>
      </el-form-item>
      <el-form-item label="配置分类" prop="name" :rules="[{required: true,message: '配置分类不能为空'}]">
        <el-select size="small" v-model="form.type" placeholder="请选择" @change="changeType">
          <el-option v-for="(item, index) in category" :key="index" :label="item.value" :value="item.key"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="配置值" v-if="show_val.input_value">
        <el-input class="max-w460" v-model="form.value" placeholder="请输入配置值"></el-input>
      </el-form-item>
      <el-form-item label="配置图片" v-if="show_val.input_image">
        <el-row>
          <el-button icon="el-icon-picture-outline" @click="openUpload('image')">选择图片</el-button>
          <div v-if="form.image!=''" class="img mt10">
            <img :src="form.image" width="100" height="100"/>
          </div>
        </el-row>
      </el-form-item>


      <el-form-item label="图片尺寸" v-if="show_val.img_size">
        <el-input class="max-w460" v-model="form.img_size" placeholder="图片尺寸格式 800*800"></el-input>
      </el-form-item>

      <el-form-item label="配置链接" v-if="show_val.input_link">
        <el-input class="max-w460" v-model="form.link" placeholder="请输入链接"></el-input>
      </el-form-item>
      <el-form-item label="配置内容" v-if="show_val.input_content">
        <el-input class="max-w460" type="textarea" v-model="form.content" placeholder="请输入内容"></el-input>
      </el-form-item>

      <el-form-item label="页面类型" v-if="show_val.page_type">
        
        <el-select size="small" v-model="form.page_type" placeholder="请选择" @change="chooseType">
          <el-option v-for="(item, index) in share" :key="index" :label="item.value" :value="item.key"></el-option>
        </el-select>


      </el-form-item>
      <el-form-item label="配置排序">
        <el-input class="max-w460" v-model="form.sort_num" placeholder="请输入排序号"></el-input>
      </el-form-item>
      <div class="common-button-wrapper">
        <el-button size="small" type="info" @click="cancelFunc">取消</el-button>
        <el-button size="small" type="primary" @click="onSubmit" :loading="loading">提交</el-button>
      </div>
    </el-form>
    <!--上传图片组件-->
    <Upload v-if="isupload" :isupload="isupload" :type="type" @returnImgs="returnImgsFunc">上传图片</Upload>
  </div>
</template>

<script>
import DicApi from '@/api/dic.js';
import Upload from '@/components/file/Upload';
import {
  formatModel
} from '@/utils/base.js'

export default {
  components: {
    /*上传组件*/
    Upload,
  },
  data() {
    return {
      form: {
        id: '',
        image: '',
        name: '',
        type: '',
        link: '',
        content: '',
        value: '',
        page_type: '',
        sort_num: '',
        img_size:'',
      },
      show_val: {
        input_value: false,
        input_image: false,
        input_link: false,
        input_content: false,
        page_type: false,
        img_size:false
      },
      loading: false,
      /*是否上传图片*/
      isupload: false,
      category: [],
      share:[]
    };
  },
  created() {
    this.getCategory();
    this.getshare();
    if (this.$route.query.id != 0 && this.$route.query.id != undefined) {
      this.form.id = this.$route.query.id;
      this.getParams()
    }
  },

  methods: {
    changeType(e) {
      var self = this;
      this.form.content = "";
      this.form.image = "";
      this.form.link = "";
      this.form.value = "";
      this.form.page_type = "";
      this.selectCategory(e);
    },

    chooseType(e) {
      console.log('页面类型',e)
      this.form.page_type = e;
    
    },

    selectCategory(value) {
      var self = this;
      if (this.category.length > 0) {
        this.category.forEach(function (item) {
          if (item.key == value) {
            self.show_val.input_value = item.input_value;
            self.show_val.input_image = item.input_image;
            self.show_val.input_link = item.input_link;
            self.show_val.input_content = item.input_content;
            self.show_val.page_type = item.page_type;
            self.show_val.img_size = item.img_size;
          }
        })
        console.log(self.show_val)
      }
    },
    getCategory() {
      let self = this;
      // 取到路由带过来的参数
      DicApi.category({}, true)
        .then(data => {
          // 将数据放在当前组件的数据内
          self.category = data.data;
        })
        .catch(error => {

        });

    },

    getshare() {
      let self = this;
      // 取到路由带过来的参数
      DicApi.getshare({}, true)
        .then(data => {
          // 将数据放在当前组件的数据内
          self.share = data.data;
        })
        .catch(error => {

        });

    },

    getParams() {
      let self = this;
      // 取到路由带过来的参数
      DicApi.edit({
        id: self.form.id
      }, true)
        .then(data => {
          // 将数据放在当前组件的数据内
          self.form = formatModel(self.form, data.data.model);
          self.selectCategory(self.form.type);
        })
        .catch(error => {

        });

    },
    onSubmit() {
      let self = this;
      let form = self.form;
      self.$refs.form.validate((valid) => {
        if (valid) {
          self.loading = true;
          if (this.form.id == '') {
            DicApi.create(form, true)
              .then(data => {
                self.$message({
                  message: '操作成功',
                  type: 'success'
                });
                self.$router.push('/setting/dic/index');
              })
              .catch(error => {
                self.loading = false;
              });
          } else {
            DicApi.update(form, true)
              .then(data => {
                self.$message({
                  message: '操作成功',
                  type: 'success'
                });
                self.$router.push('/setting/dic/index');
              })
              .catch(error => {
                self.loading = false;
              });
          }

        }
      });
    },
    /*上传*/
    openUpload(e) {
      this.type = e;
      this.isupload = true;
    },
    /*获取图片*/
    returnImgsFunc(e) {
      if (e != null && e.length > 0) {
        if (this.type == 'image') {
          this.form.image = e[0].file_path;
        }
      }
      this.isupload = false;
    },
    /*取消*/
    cancelFunc() {
      this.$router.back(-1);
    },

  }

};
</script>

<style lang="scss" scoped>
.basic-setting-content {
}

.product-add {
  padding-bottom: 50px;
}
</style>
